<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      {{obj.words}} {{obj.age}}
      <button @click="obj.words+='~'">++</button>
      <button @click="obj.age++">++</button>
      <hr />
      <h1>{{list}}</h1>
      <button @click="list.splice(0, 1, {id:  33})">新增一个数据</button>
    </div>

    <script src="./vue.js"></script>
    <script>
      new Vue({
        el: "#app",
        data: {
          obj: {
            words: "苹果",
            age: 19,
          },
          list: [{ id: 1 }, { id: 20 }, { id: 30 }, { id: 40 }],
        },
        methods: {},
        computed: {},
        watch: {
          // 基本数据类型, 不需要开深度监听
          // $ _ 字母 数字
          // 单独监听对象的某个属性名
          "obj.age"(newValue, oldValue) {
            console.log("obj.age变化了", newValue, oldValue);
          },

          // 复杂数据 要开启深度监听
          // 复杂数据: 监听对象的所有属性名
          // 简单数据 - 基本数据 string number boolean null undefined
          // 复杂数据 - 引用数据 array object

          // 监听数组  :
          // 七个方法修改数组, 可以直接被watch监听到: push pop shift unshift reverse sort splice
          list(newV, oldV) {
            console.log("newV  ----->  ", newV);
          },
        },
      });
    </script>
  </body>
</html>
